<template>
  <div class="information">
    <input type="txt" class="value" :placeholder="this.userMsg[this.msgKey]" v-model="result" />
    <input type="button" value="修改" class="btn" @click="changeMsg">
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import axios from "axios";

export default {
  name: "ModifyInfo",
  data() {
    return {
      msgKey: "",
      userMsg: "",
      result: ""
    };
  },
  computed: {},
  methods: {
    changeMsg(){
      console.log(this.result)
      axios.get("/api/getusermsg.json?key="+this.msgKey+"&value="+this.result).then(this.changeMsgSucc);
    },
    changeMsgSucc(){
      this.$router.push('/user')
    }
    // getUserMsg(attr) {
    //   axios.get("/api/getusermsg.json").then(this.getUserMsgSucc);
    // },
    // getUserMsgSucc(res) {
    //   // console.log(res);
    //   if (res.status == 200 && res.data) {
    //     this.userMsg = res.data;
    //   }
    // }
  },
  activated() {
    // this.getUserMsg();
    this.msgKey = this.$route.params.msg
    this.userMsg = $cookies.get("userMsg")
    
  }
};
</script>
<style lang="scss" scoped>
@import "~styles/varibles.styl";

.information {
  position: relative;
  overflow: hidden;
  width: 100vw;
  height: 15vh;
  background: skyblue;
  display: flex;
  justify-content: center;
  align-items: center;
  .value {
    position: relative;
    color: #6f6f6f;
    width: 60vw;
    height: 10vw;
    padding: 0.1rem 0.5rem;
    border-radius: 0.2rem;
    box-shadow: 0.01rem 0.01rem 0.1rem blue;
  }
  .btn{
    position: relative;
    left: 0.2rem;
    color: #ffffff;
    font-weight: bold;
    background: $bgColor;
    width: 12vw;
    height: 12vw;
    border-radius: 0.2rem;
    box-shadow: 0.01rem 0.01rem 0.1rem blue;

  }
}
</style>
